<template>
  <section class="CategoryList">
    <div class="navbar-div">
        <van-nav-bar title="类别列表" fixed></van-nav-bar>
    </div>
    <!-- 内容 -->
    <div class="category-wrapper">
        <van-row>
            <van-col span='6'>
                <div id="leftNav">
                    <ul>
                        <li v-for="(item,index) in category" :key="index" 
                        @click="clickCategory(index,item.ID)" :class="{active:activeIndex==index}">
                            {{item.MALL_CATEGORY_NAME}}
                        </li>
                    </ul>
                </div>
            </van-col>

            <van-col span="18">
                 <div class="categorySub">
                    <van-tabs v-model="active"   @click="onClickCategorySub">
                        <van-tab v-for="(item,index) in categorySub" 
                            :key="index"
                            :title="item.MALL_SUB_NAME"
                          
                           >

                        </van-tab>
                    </van-tabs>
                </div>

                <div id="list-div">
                    <van-pull-refresh v-model="isRefresh"  @refresh='onRefresh'>
                        <van-list v-model="loading" :finished='finished' @load='onload'>
                            <div class="list-item" @click="goGoodInfo(item.ID)" v-for='(item,index) in goodList' :key="index" >
                               <div class="list-item-img">
                                   <img :src="item.IMAGE1" width="100%" alt="" :onerror='errorImg'>
                               </div>
                               <div class="list-item-text">
                                   <div>{{item.NAME}}</div>
                                   <div> ￥{{item.ORI_PRICE | moneyFilter}}</div>
                               </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>

            </van-col>
        </van-row>
    </div>
  
  </section>
</template>

<script>
import axios from 'axios';
import url from '@/serviceAPI.config.js';
import {Toast} from 'vant';
import {toMoney} from '@/filter/moneyFilter';
export default {
  name: 'CategoryList',
  data() {
    return {
        category:[],
        activeIndex:0,
        categorySub:[],
        active:0,
        loading:false,
        finished:false,
        isRefresh:false,//下拉刷新
        page:1,
        goodList:[],
        categorySubId:'',
        errorImg:'this.src="' + require('@/assets/images/errorimg.png') + '"'   ,  //错误图片显示路径
    }
  },
  components: {},
  watch: {},
  mounted() {
       let winHeight = document.documentElement.clientHeight;
       document.getElementById("leftNav").style.height= winHeight-46-50 +'px'
       document.getElementById('list-div').style.height=winHeight-90-50 +'px'

  },
  created () {
      this.getCategory();
  },
   filters: {
         moneyFilter(money){
             return toMoney(money)
         }  
       },
  methods: {

      //获取大类
      getCategory(){
          axios({
              url:url.getCategoryList,
              method:'get'
          }).then(response=>{
            
               if(response.data.code == 200 && response.data.message ){
               
                   this.category=response.data.message;
                   this.getCategorySubByCategoryId(this.category[0].ID)
                }else{
                    Toast('服务器错误，数据取得失败')
                }
          }).catch(error=>{
              console.log(error)
          })
      },

    //通过大类获取子类
      getCategorySubByCategoryId(categoryId){
          axios({
              url:url.getCategorySubList,
              method:'post',
              data:{categoryId:categoryId}
          }).then(response=>{
              console.log(response);
              if(response.data.code==200 && response.data.message){
                  this.categorySub = response.data.message;
                  console.log("sub",response);
                  this.active=0;
                  this.categorySubId = this.categorySub[0].ID;
                  this.getGoodList();
                  console.log('goodList',this.goodList);
                  this.onload()
              }else{
                  Toast.fail('服务器错误，数据取得失败')
              }
          }).catch(error=>{
              console.log(error)
          })
      },
      //获取商品列表
      //上拉加载
      getGoodList(){
          axios({
              url:url.getGoodsListByCategorySubID,
              method:'post',
              data:{
                  categorySubId:this.categorySubId,
                  page:this.page
              }
          })
          .then(response=>{
              console.log('ddd',this.categorySubId)
              if(response.data.code==200 && response.data.message.length ){
                  this.page++;
                  this.goodList = this.goodList.concat(response.data.message)
              }else{
                  this.finished=true;
              }

                this.loading = false;
                console.log(this.finished)

          })
          .catch(error=>{
              console.log(error)
          })
      },
      //根据id跳转到商品页面
      goGoodInfo(id){
          this.$router.push({name:'Goods',params:{goodsId:id}})
      },
      //点击子类获取商品信息
      onClickCategorySub(index,title){
          this.categorySubId = this.categorySub[index].ID;
          console.log('categorySubId'+this.categorySubId);
          console.log('title',title)
          
          this.goodList =[];
          this.finished = false;
          this.page =1;
          this.onload();
          this.getGoodList();
      },
          
      //点击大类
      clickCategory(index,categoryId){
          this.categoryIndex = index;
          this.page =1;
          this.finished = false;
          this.goodList =[];
          this.getCategorySubByCategoryId(categoryId)
      },

      onload(){
          setTimeout(()=>{
            this.categorySubId = this.categorySubId?this.categorySubId:this.categorySubId[0].ID;
            this.getGoodList()
          },1000)
      },
      //下来刷新
    onRefresh(){
        setTimeout(()=>{
            this.isRefresh = false;
            this.list=[];
            this.finished= false;
            this.onload()
        },500)
    }
  }
}
</script>

<style scoped>
.category-wrapper{
    margin-top: 46px;
}
#leftNav{
    height: calc( 100vh - 46px );
    border-right: 1px solid #ccc;
}
#leftNav ul li{
    height: 2rem;
    line-height: 2rem;
    font-size: 0.8rem;
    color: black;
    border-bottom: 1px solid #ccc;
}
#leftNav ul li.active{
    background-color: cornflowerblue;
    color: #fff;
}
 .list-item{
     display: flex;
     flex-direction: row;
        text-align: center;
      font-size: .8rem;
      padding: 5px;
      border-bottom: 1px solid #ccc;
    }
    #list-div{
        overflow: scroll;
    }
    .list-item-img{
        flex:8;
    }
    .list-item-text{
        flex:16;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
